<template>
  <!-- 分类页面 -->
  <div class="classify">
    <!-- 头部 -->
    <van-search
      shape="round"
      show-action
      label
      placeholder="请输入搜索关键词"
      autofocus
      style="width: 100%;position: fixed;top: 0px;z-index: 9;"
    >
      <!-- 左侧 -->
      <template slot="left">
        <van-icon
          @click="back"
          name="arrow-left"
          color="#6D6F79"
          size="25"
          style="margin-right: 10px;"
        />
      </template>
      <!-- 右侧 -->
      <template slot="action">
        <div class="search-btn"></div>
      </template>
      <!-- 内左 -->
      <template slot="left-icon">
        <van-icon name="search" />
      </template>
    </van-search>
    <!-- 分类选项 -->
    <div class="classify_wrapper">
      <div class="classify_left_container">
          <LeftItem
            v-for="(item,index) in navOne"
            :key="index"
            :item="item"
            :selectIndex="selectIndex"
            :index="index"
          />
      </div>
      <div class="classify_right_container">
        <div class="classify_right_wrapper">
          <div
            v-for="(item,index) in navTwo"
            :key="index"
            class="classify_right_item_container"
          >
            <div>
              <img :src="item.icon" />
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftItem from "../components/LeftItem";

export default {
  components: {
    LeftItem
  },
  computed: {
    //全部
    // navs: function() {
    //   return this.$store.state.classifyModule.navs;
    // },
    navOne:function(){
      return this.$store.state.classifyModule.navOne;
    },
    //点击一级显示二级
    navTwo: function() {
      return this.$store.state.classifyModule.navTwo;
    },
    //样式
    selectIndex: function() {
      return this.$store.state.classifyModule.selectIndex;
    }
  },
  mounted() {
    this.$store.dispatch("getClassify");
  },
  methods: {
    back() {
      //返回事件
      window.history.back();
    }
  }
};
</script>

<style scoped>
.classify_wrapper {
  margin-top: 60px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.classify_left_container {
  width: 30%;
  height: 100%;
  /* overflow: scroll; */
}

.classify_right_container {
  width: 70%;
  height: 100%;
  /* border: 1px solid  black; */
  /* overflow: scroll; */
}

.classify_right_wrapper {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.classify_right_item_container {
  width: 33%;
  height: 120px;
}

.classify_right_item_container div {
  width: 100%;
  text-align: center;
}

.classify_right_item_container img {
  width: 80%;
  margin-left: 10%;
}
</style>